<template>
  <el-card v-if="course">
    <el-row>
      <el-col :span="8">
        <img :src="course.img" style="width:100%;height:180px;object-fit:cover;">
      </el-col>
      <el-col :span="16">
        <h2>{{ course.title }}</h2>
        <p>{{ course.desc }}</p>
        <div>讲师：{{ course.teacher }}</div>
        <el-tag v-for="tag in course.tags" :key="tag" style="margin-right:5px;">{{ tag }}</el-tag>
        <div style="margin-top:10px;">
          <el-button type="primary" @click="editDialog = true">编辑</el-button>
          <el-popconfirm title="确定删除课程吗？" @confirm="deleteCourse">
            <el-button type="danger">删除</el-button>
          </el-popconfirm>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="编辑课程" v-model="editDialog">
      <el-form :model="editForm">
        <el-form-item label="课程名称"><el-input v-model="editForm.title" /></el-form-item>
        <el-form-item label="简介"><el-input v-model="editForm.desc" /></el-form-item>
        <el-form-item label="讲师"><el-input v-model="editForm.teacher" /></el-form-item>
        <el-form-item label="图片URL"><el-input v-model="editForm.img" /></el-form-item>
        <el-form-item label="标签"><el-input v-model="editForm.tags" placeholder="用逗号分隔" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialog = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </template>
    </el-dialog>
    <el-divider>课程目录</el-divider>
    <el-timeline>
      <el-timeline-item v-for="(chapter, i) in course.chapters" :key="i">{{ chapter }}</el-timeline-item>
    </el-timeline>
    <el-divider>评论区</el-divider>
    <el-input v-model="comment" placeholder="请输入评论..." />
    <el-button @click="submitComment" style="margin-top:10px;">发表评论</el-button>
    <el-list>
      <el-list-item v-for="(c, i) in comments" :key="i">
        {{ c }}
        <el-popconfirm title="删除这条评论？" @confirm="deleteComment(i)">
          <el-button type="text" size="small" style="color:red;float:right;">删除</el-button>
        </el-popconfirm>
      </el-list-item>
    </el-list>
  </el-card>
  <el-empty v-else description="课程不存在" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

const route = useRoute()
const router = useRouter()
const store = useStore()
const course = ref(null)
const editDialog = ref(false)
const editForm = ref({})
const comments = ref(['课程讲得很好！'])
const comment = ref('')

onMounted(async () => {
  const courseId = parseInt(route.params.id)
  await store.dispatch('course/fetchCourseDetail', courseId)
  course.value = store.getters['course/courseDetail']
  if (course.value) {
    editForm.value = { ...course.value, tags: course.value.tags.join(',') }
  }
})

function saveEdit() {
  if (course.value) {
    course.value = { ...editForm.value, tags: editForm.value.tags.split(',') }
    editDialog.value = false
  }
}

function deleteCourse() {
  router.push('/course/list')
}

function submitComment() {
  if (comment.value) {
    comments.value.push(comment.value)
    comment.value = ''
  }
}

function deleteComment(i) {
  comments.value.splice(i, 1)
}
</script> 